<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>底部菜单管理</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="css/slide.css" />
	</head>

	<body>
		<div id="backstage" class="layui-layout layui-layout-admin">
			<union-header :header="header"></union-header>
			<uniocn-side :side="side"></uniocn-side>
			<div class="layui-body">
				<!-- 内容主体区域 -->
				<div class="finance-com">
					<div class="finance-title" style="background: #fff;">
						<div class="layui-btn">底部菜单管理</div>
					</div>
					<div class="table">
						<table class="layui-hide" id="demo" lay-filter="demo"></table>
						<script type="text/html" id="barDemo">
							<a class="layui-btn layui-btn-sm" lay-event="detail">选择图片</a>
						</script>
					</div>
					<button class="layui-btn">提交</button>
				</div>
			</div>
		</div>

		<div class="alear_a">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">幻灯片图片</label>
					<div class="layui-input-block">
						<div class="layui-upload">
							<button type="button" class="layui-btn" id="test1">上传图片</button>
							<div class="layui-upload-list">
								<img class="layui-upload-img" style="width: 120px;" id="demo1">
								<p id="demoText"></p>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>

		<!--修改名称-->
		<script type="text/html" id="inputName">
			<input class="layui-input" type="input" name="name">
		</script>

		<!--开关-->
		<script type="text/html" id="switchTpl">
			<input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-filter="sexDemo" {{d.id==1? 'checked': ''}}>
		</script>

		<!--链接-->
		<script type="text/html" id="inputLink">
			<input class="layui-input" type="input" name="link">
		</script>
	</body>

	<script src="layui/layui.js"></script>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/vue2.5.16.js"></script>
	<script src="js/public.js"></script>
	<script src="js/data.js"></script>
	<script>
		new Vue({
			el: "#backstage",
			data: {
				header: data.header,
				side: data.side,
			}
		})

		layui.use(['element', 'layer', 'table', 'form', 'upload'], function() {
			var element = layui.element,
				layer = layui.layer,
				table = layui.table,
				form = layui.form,
				upload = layui.upload;
			table.render({
				elem: '#demo',
				cols: [
					[ //标题栏
						{
							field: 'position',
							title: '默认链接',
							align: 'center',
						}, {
							title: '图片',
							align: 'center',
							toolbar: '#barDemo'
						}, {
							field: 'name',
							title: '修改名称',
							align: 'center',
							templet: '#inputName',
							unresize: true
						}, {
							field: 'sex',
							title: '自定义开关',
							align: 'center',
							templet: '#switchTpl',
							unresize: true
						}, {
							field: 'link',
							title: '链接',
							align: 'center',
							templet: '#inputLink',
							unresize: true
						}

					]
				],

				data: [{
					"position": "首页",
				}, {
					"position": "生活圈",
				}, {
					"position": "订单",
				}, {
					"position": "入驻",
				}, {
					"position": "我的",
				}]

			});

			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if(obj.event === 'detail') {
					//console.log('ID：' + data.id + ' 的查看操作');
					layer.open({
						title: '上传图片',
						type: 1,
						area: '600px',
						content: $('.alear_a'),
						btn: '提交'
					});
				}
			});

			//普通图片上传
			var uploadInst = upload.render({
				elem: '#test1',
				url: '',
				before: function(obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result) {
						$('#demo1').attr('src', result); //图片链接（base64）
					});
				},

				done: function(res) {
					//如果上传失败
					if(res.code > 0) {
						return layer.msg('上传失败');
					}
					//上传成功
				},

				error: function() {
					//演示失败状态，并实现重传
					var demoText = $('#demoText');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function() {
						uploadInst.upload();
					});
				}
				
			})

			//监听开关操作
			form.on('switch(sexDemo)', function(obj) {
				console.log(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
			});

		})
	</script>

</html>